<!--活动管理 - 查看活动-->
<template>
  <div class="rightCenter">
    <div class="editTop">
      <div class="editTopTitle" @click="cancelClick()">活动管理</div>
      <i class="icon font_family icon-yema-you"></i>
      <div class="editTopTitle">查看活动</div>
    </div>
    <div class="editList">
      <div class="editListName">
        活动名称：
      </div>
      <div class="editListInpFont">
        {{titleVal}}
      </div>
    </div>
    <div class="editList">
      <div class="editListName">
        头图：
      </div>
      <div class="editUpImg">
        <img class="editHandImg" :src="handImgVal" alt="">
      </div>
    </div>
    <div class="editList">
      <div class="editListName">
        活动介绍：
      </div>
      <pre>
                    {{briefVal}}
                </pre>
    </div>
    <div class="editList">
      <div class="editListName">
        活动类型：
      </div>
      <div class="editListInpFont">
        答题
      </div>
    </div>
    <div class="editList">
      <div class="editListName">
        问题列表：
      </div>
      <div class="issue">
        <li class="issueLi" v-for='(item,index) in issueList' :key='index'>
          <div class="editListInpFont">
            {{item.subject }}
          </div>
          <div class="issueSelect" v-for='(iten,ind) in item.options' :key='ind'>
            <div class="issueTrue fontBlue">正确</div>
            <div @click='issueCheckClick(index,ind)' class="issueCheck" :class="{checkBack:!iten.show,checkOkBack:iten.show}">
              <div class="checkBor"></div>
            </div>
            <div class="isuueInd">
              {{iten.num}}
            </div>
            <div class="editListInpFont issueInp">
              {{iten.value}}
            </div>
          </div>
          <div class="issueButton">
          </div>
        </li>
      </div>
    </div>
    <div class="editList">
      <div class="editListName">
        奖品配置：
      </div>
      <div class="prizeBox">
        <div class="prize" v-for='(item,index) in prizeList' :key='index'>
          <div class="prizeTop">
            <div :class="{prizeTopInd:true,yellowFont:index != 0,blueFont:index == 0}">
              {{index | prizeTopIndFun}}
            </div>
            答对
            <div class="prizeTopTwo prizeTopDiv">
              {{item.condition}}
            </div>

            题
          </div>
          <div class="prizeFoot">
            获得
            <div class="prizeTopTherr prizeTopDiv">
              {{item.info}}
            </div>
            共
            <div class="prizeTopFour prizeTopDiv">
              {{item.count}}
            </div> 份
          </div>
        </div>
      </div>
    </div>
    <div class="editList">
      <div class="editListName">
        活动时间：
      </div>
      <div class="timeBox">
        <div class="editListInpFont beginDiv">
          {{begin | baseTimeFun}}
        </div>
        <div class="editListInpFont beginDiv">
          {{finish | baseTimeFun}}
        </div>
      </div>
    </div>
    <div class="editList">
      <div class="editListName">
        规则说明：
      </div>
      <div class="explain">
        1.每个活动最多可以添加10个题目，每个题目只有4个答案选项；
        <br/> 2.奖品配置最多设置5等，等级默认按照答对题数多少从高到低排列；
        <br/> 3.若一等奖奖品被领完，但是有用户满足领一等奖奖品的条件，则按照先
        <br/> 后顺序领二等奖奖品，直到所有奖品发放完毕，活动自动结束。
      </div>
    </div>
    <!-- <div class="footButton">
            <div class="addBut" @click='addClick'>
                保 存
            </div>
            <div class="cancelBut" @click='cancelClick'>
                取 消
            </div>
        </div> -->
  </div>
</template>
<script>
  import taskRequest from "../../assets/task";
  export default {
    data() {
      return {
        editVal: "新增活动",
        titleVal: "", //名称
        handImgVal: null, //头图
        briefVal: "", //活动介绍
        options: [
          { value: "11", label: "答题" }
          // { value: '22', label: '调查问卷' },
        ],
        issueList: [
          {
            title: "",
            chide: [
              { show: true, value: "", num: "A：" },
              { show: false, value: "", num: "B：" },
              { show: false, value: "", num: "C：" },
              { show: false, value: "", num: "D：" }
            ],
            show: true
          }
        ],
        prizeList: [
          {
            num: "1",
            id: "",
            prizeNum: "",
            numlist: [{ value: "1", label: "1" }],
            idList: [
              { value: "1", label: "吹风机" },
              { value: "2", label: "笔记本" }
            ]
          }
        ],
        begin: "", //开始时间
        finish: "" //结束时间
      };
    },
    filters: {
      prizeTopIndFun: function (val) {
        if (val == 0) {
          return "一等奖";
        } else if (val == 1) {
          return "二等奖";
        } else if (val == 2) {
          return "三等奖";
        } else if (val == 3) {
          return "四等奖";
        } else if (val == 4) {
          return "五等奖";
        }
      }
    },
    created: function () {
      let self = this;
      if (sessionStorage.getItem("TABLIST")) {
        let arr = JSON.parse(sessionStorage.getItem("TABLIST"));
        let routShow = false;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].name == "活动管理") {
            routShow = true;
          }
        }
        if (!routShow) {
          this.$router.push({
            path: "/login"
          });
          sessionStorage.clear();
          self.$message("暂无权限");
          return;
        }
      } else {
        this.$router.push({
          path: "/login"
        });
        sessionStorage.clear();
        self.$message("暂无权限");
        return;
      }
      taskRequest
        .promotionInfoFun({
          promotionId: self.$route.query.id
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.titleVal = data.data.name;
            self.handImgVal = data.data.headShow;
            self.briefVal = data.data.desc;
            self.begin = data.data.startTime;
            self.finish = data.data.endTime;
            self.issueList = data.data.subjectsVo
            self.prizeList = data.data.awards
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    watch: {},
    mounted() { },
    methods: {
      //活动管理
      cancelClick() {
        this.$router.push({
          path: "/home/activity"
        });
      },
    }
  };
</script>
<style scoped>
  .editUpImgHand {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: #f2f5f7;
    color: #b2b7c0;
  }

  .editUpImgHand i {
    font-size: 20px;
  }

  .textBox {
    width: 350px;
    min-height: 80px;
    line-height: 24px;
    font-size: 14px;
    background: #f2f5f7;
    margin-left: 12px;
    padding: 4px 8px;
    margin-right: 14px;
    resize: none;
  }

  .editHandImg {
    width: 330px;
    height: 255px;
  }

  .issue {
    width: 450px;
  }

  .issueSelect {
    display: flex;
    margin: 12px;
  }

  .issueTrue {
    height: 40px;
    line-height: 40px;
  }

  .issueCheck {
    margin: 10px;
  }

  .isuueInd {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000;
  }

  .issueInp {
    width: 230px !important;
    height: 40px !important;
  }

  .issueButton {
    display: flex;
    margin: 12px;
  }

  .fontBlue {
    color: #2f3a5d;
    font-size: 14px;
    font-weight: bold;
  }

  .banckBlue {
    background: #279de2;
  }

  .banckRed {
    background: #ed4a47;
    margin: 0 24px;
  }

  .prizeDelect {
    background: #ed4a47;
    margin: 0 12px;
  }

  .prizeBox {
    width: 450px;
    padding: 4px 8px;
  }

  .prize {
    margin-bottom: 14px;
  }

  .prizeFoot {
    margin-top: 14px;
  }

  .prizeFoot,
  .prizeTop {
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #2f3a5d;
  }

  .prizeTopInd {
    margin-right: 14px;
  }

  .prizeTopSelect {
    margin: 0 14px;
  }

  .prizeFootSelect {
    margin: 0 14px;
  }

  .prizeFootInp {
    width: 60px;
    height: 40px;
    margin: 0 14px;
    padding: 0 5px;
    background: #f2f5f7;
  }

  .addPrize {
    width: 110px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background: #279de2;
    margin: 14px;
  }

  .explain {
    font-size: 14px;
    padding: 14px 8px;
    line-height: 24px;
    color: #2f3a5d;
    font-weight: bold;
  }

  .timeBox {
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    color: #2f3a5d;
  }

  .footButton {
    display: flex;
    width: 700px;
    align-items: center;
    margin-top: 124px;
    margin-left: 230px;
  }

  .addBut {
    width: 150px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    margin: 0 12px;
    background: #279de2;
    color: white;
  }

  .cancelBut {
    width: 150px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    margin: 0 12px;
    border: 1px solid #279de2;
    color: #279de2;
  }

  .beginDiv {
    width: 180px;
    height: 40px;
  }

  pre {
    width: 350px;
    margin-left: 12px;
    font-size: 16px;
    color: #40475d;
    background: #f2f5f7;
    padding: 0 8px;
  }

  .prizeTopDiv {
    background: #f2f5f7;
    border: none !important;
    color: #2f3a5d;
    font-size: 14px;
    font-weight: bold;
    margin: 0 14px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prizeTopTwo {
    width: 220px;
    height: 40px;

  }

  .prizeTopTherr {
    width: 165px;
    height: 40px;
  }

  .prizeTopFour {
    width: 50px;
    height: 40px;
    padding: 0 4px;

  }
</style>